<template>
  <div>
    <a-form ref="form" :model="model" :rules="validatorRules">
      <a-form-item name="username">
        <a-input v-model:value="model.username" size="large" placeholder="请输入帐户名">
          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input>
      </a-form-item>
      <a-form-item  name="password">
        <a-input v-model:value="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码">
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input>
      </a-form-item>

      <a-row :gutter="0">
        <a-col :span="16">
          <a-form-item name="inputCode">
            <a-input v-model:value="model.inputCode" size="large" type="text" placeholder="请输入验证码">
              <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8" style="text-align: right">
          <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
          <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {message} from "ant-design-vue";
import {handleChangeCheckCodeApi} from "@/api/user/index.js";
import useUserStore from "@/store/modules/user.js";

const model = reactive({
  username: '',
  password: '',
  inputCode: ''
})
const requestCodeSuccess = ref(false)
const randCodeImage = ref('')
let curDatetime = ''
const loginType = ref(0)
const form = ref()
const user = useUserStore()
const emit = defineEmits(['validateFail','success','fail'])
/**
 * 获取验证码
 */
const handleChangeCheckCode = () =>{
  curDatetime = new Date().getTime();
  model.inputCode = ''
  handleChangeCheckCodeApi(curDatetime).then(res=>{
    if(res.success){
      randCodeImage.value = res.result
      requestCodeSuccess.value = true
    }else{
      message.error(res.message)
      requestCodeSuccess.value = false
    }
  }).catch(()=>{
    requestCodeSuccess.value = false
  })
}
/**
 * 验证用户名或邮箱
 * @param rule 校验规则
 * @param value 校验值
 * @param callback 回调函数
 */
const handleUsernameOrEmail =  (rule, value, callback) => {
  const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
  if (regex.test(value)) {
    loginType.value = 0
  } else {
    loginType.value = 1
  }
  callback()
}
/**
 * 登录
 * @param rememberMe 是否记住我
 */
const handleLogin = (rememberMe) => {
  form.value
      .validate()
      .then(() => {
        let loginParams = {
          username: model.username,
          password: model.password,
          captcha: model.inputCode,
          checkKey: curDatetime,
          remember_me: rememberMe,
        }
        user.Login(loginParams).then((res) => {
          emit('success', res.result)
        }).catch((err) => {
          console.log("err", err)
          emit('fail', err)
        });
        emit('validateFail')
      })
      .catch(error => {
        emit('validateFail')
        console.log('error', error);
      });
}
let validatorRules = {
  username: [
    { required: true, message: '请输入用户名!' },
    { validator: handleUsernameOrEmail }
  ],
  password: [{
    required: true, message: '请输入密码!'
  }],
  inputCode: [{
    required: true, message: '请输入验证码!'
  }]
}
defineExpose({
  handleLogin,
  handleChangeCheckCode
})
onMounted(()=>{
  handleChangeCheckCode()
})
</script>
<style scoped>

</style>
